<template>
	<bigScreenContainer>
		<div class="page_board">
			<div class="page_header" :style="{
                background: `url(${componentContent.imageMap['bg_head']}) no-repeat`,
                'background-size': '100% 100%',
            }">
				<span>腾 洋 销 售 驾 驶 舱</span>
			</div>
			<div class="page_content">
				<div class="home_top">
					<div class="l_left">
						<div class="com_big_title">销售运营</div>
						<div class="com_small_title">
							<div v-for="item in title1" :style="{ background: item.bgColor }"
								:class="[item.select ? 'select' : '']" @click="tabChange1(item.bigTitle)">
								<label>{{ item.bigTitle }}</label>
								<span v-if="item.smallTitle" :style="{ color: item.lineColor }">{{ item.smallTitle
                                    }}</span>
							</div>
						</div>
						<div class="com_box">
							<div v-if="title1[0].select" class="st_xsyy">
								<div class="left">
									<div class="com_chart" ref="salesChart"></div>
								</div>
								<div class="right">
									<div>
										<span>年度销售目标：</span><label>{{
                                            xsyyData.xsmb_ndxsmb
                                        }}</label>
									</div>
									<div>
										<span>年度销售金额：</span><label>{{
                                            xsyyData.xsmb_ndxsjr
                                        }}</label>
									</div>
									<div style="margin-bottom: 10px">
										<span>同比销售金额：</span><label>{{
                                            xsyyData.xsmb_tbxsjr
                                        }}</label>
										<p>
											同比增长{{ xsyyData.xsmb_tbxszb }}%
										</p>
									</div>
									<!-- <div>
									<span>意向：</span><label style="margin-right: 80px;">{{ xsyyData.yx }}</label><span>商机：</span><label>{{ xsyyData.sj }}</label>
								</div> -->
								</div>
							</div>
							<div v-if="title1[1].select" key="domXszs" class="com_chart" ref="domXszs"></div>
						</div>
					</div>
					<!-- <div class="l_center">
						<div class="com_big_title"></div>
						<div class="com_box">
							<div class="com_chart" ref="worldMap"></div>
						</div>
					</div> -->
					<div class="l_center">
						<div class="com_big_title">国家排名</div>
						<div class="com_small_title">
							<div v-for="item in title0" :style="{ background: item.bgColor }"
								:class="[item.select ? 'select' : '']">
								<label>{{ item.bigTitle }}</label>
								<span v-if="item.smallTitle" :style="{ color: item.lineColor }">{{ item.smallTitle
                                    }}</span>
							</div>
						</div>
						<div class="com_box">
							<div class="box_m gjpm" v-if="title0[0].select">
								<div class="box_l">
									<div class="com_chart" key="domDqpm" ref="domDqpm"></div>
								</div>
								<div class="box_r">
									<div>
										<span>累计下单总金额</span><label>{{ ljxdzje }}万元</label>
									</div>
									<div>
										<div class="com_table">
											<div class="thead">
												<div>排名</div>
												<div>国家</div>
												<div>订单数</div>
												<div>金额</div>
											</div>
											<div class="tbody" style="height: 110px">
												<div class="tr" v-for="(
                                                        item, index
                                                    ) in xsTable">
													<div>
														NO.{{ index + 1 }}
													</div>
													<div>{{ item.gj }}</div>
													<div>{{ item.dds }}</div>
													<div>{{ item.xse }}</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="l_right">
						<div class="com_big_title">客户统计</div>
						<div class="com_small_title">
							<div v-for="item in title2" :style="{ background: item.bgColor }"
								:class="[item.select ? 'select' : '']" @click="tabChange2(item.bigTitle)">
								<label>{{ item.bigTitle }}</label>
								<span v-if="item.smallTitle" :style="{ color: item.lineColor }">{{ item.smallTitle
                                    }}</span>
							</div>
						</div>
						<div class="com_box">
							<div v-if="title2[0].select" class="com_chart" key="domKhpm" ref="domKhpm"></div>
							<div v-if="title2[1].select" class="com_chart" key="domLnkhpm" ref="domLnkhpm"></div>
							<div v-if="title2[2].select" class="box_m gjzb">
								<div class="box_l">
									<div class="com_chart" style="margin-top: 20px;margin-bottom: -20px;" key="domSfzb" ref="domSfzb"></div>
								</div>
								<div class="box_r">
									<div class="com_table">
										<div class="thead">
											<div>排名</div>
											<div>国家</div>
											<div>合同</div>
											<div>金额</div>
										</div>
										<div class="tbody" style="height: 150px">
											<div class="tr" v-for="(item, index) in khTable">
												<div>NO.{{ index + 1 }}</div>
												<div>{{ item.gj }}</div>
												<div>{{ item.hts }}</div>
												<div>{{ item.hte }}</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="home_center">
					<div class="l_left">
						<div class="com_big_title">费用统计</div>
						<div class="com_small_title">
							<div v-for="item in title3" :style="{ background: item.bgColor }"
								:class="[item.select ? 'select' : '']" @click="tabChange3(item.bigTitle)">
								<label>{{ item.bigTitle }}</label>
								<span v-if="item.smallTitle" :style="{ color: item.lineColor }">{{ item.smallTitle
                                    }}</span>
							</div>
						</div>
						<div class="com_box">
							<div v-if="title3[0].select" class="com_chart" key="domYf" ref="domYf"></div>
							<div v-if="title3[1].select" class="com_chart" key="domBgfy" ref="domBgfy"></div>
							<div v-if="title3[2].select" class="com_chart" key="domBxf" ref="domBxf"></div>
						</div>
					</div>
					<div class="l_center">
						<div class="com_big_title">销售详情</div>
						<div class="com_small_title">
							<div v-for="item in title4" :style="{ background: item.bgColor }"
								:class="[item.select ? 'select' : '']" @click="tabChange4(item.bigTitle)">
								<label>{{ item.bigTitle }}</label>
								<span v-if="item.smallTitle" :style="{ color: item.lineColor }">{{ item.smallTitle
                                    }}</span>
							</div>
						</div>
						<div class="com_box">
							<div v-if="title4[0].select" class="com_chart" key="domCpzb" ref="domCpzb"></div>
							<div v-if="title4[1].select" class="com_table">
								<div class="thead">
									<div>排名</div>
									<div>销售人员</div>
									<div>销售金额</div>
									<div>销售费用</div>
									<div>销售费用占比</div>
								</div>
								<div class="tbody" style="height: 150px">
									<div class="tr" v-for="(item, index) in rypmData">
										<div>NO.{{ index + 1 }}</div>
										<div>{{ item.name }}</div>
										<div>{{ item.jr }}</div>
										<div>{{ item.xsfy }}</div>
										<div>{{ item.fyzb }}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="l_right">
						<div class="com_big_title">销售待发货</div>
						<div class="com_small_title">
							<div v-for="item in title5" :style="{ background: item.bgColor }"
								:class="[item.select ? 'select' : '']" @click="tabChange5(item.bigTitle)">
								<label>{{ item.bigTitle }}</label>
								<span v-if="item.smallTitle" :style="{ color: item.lineColor }">{{ item.smallTitle
                                    }}</span>
							</div>
						</div>
						<div class="com_box">
							<div v-if="title5[0].select" class="com_chart" key="domJypje" ref="domJypje"></div>
							<div v-if="title5[1].select" class="com_chart" key="domDfhsl" ref="domDfhsl"></div>
							<div v-if="title5[2].select" class="com_chart" key="domDfhje" ref="domDfhje"></div>
						</div>
					</div>
				</div>
				<div class="home_foot">
					<div class="l_left">
						<div class="com_big_title">销售合同</div>
						<div class="com_box st_xsht">
							<div>
								<div class="com_chart" key="domXsht" ref="domXsht"></div>
							</div>
							<div class="right">
								<div>
									<span>合同金额</span><label>{{ xsyyData.xsht_je }}</label>
								</div>
								<div>
									<span>合同回款金额</span><label>{{ xsyyData.xsht_hkje }}</label>
								</div>
							</div>
						</div>
					</div>
					<div class="l_center">
						<div class="com_big_title">订单准交率</div>
						<div class="com_box" key="domDdzjl" ref="domDdzjl"></div>
					</div>
					<div class="l_right">
						<div class="com_big_title">销售额预测</div>
						<div class="com_box" key="domXseyc" ref="domXseyc"></div>
					</div>
				</div>
			</div>
		</div>
	</bigScreenContainer>
</template>
<script>
	export default {
    name: "sales",
    data() {
        return {
            componentContent,
            title1: [
                {
                    bigTitle: "销售目标",
                    smallTitle: "",
                    bgColor: "rgba(70,168,247,0.3)",
                    lineColor: "#46A8F7",
                    select: true,
                },
                {
                    bigTitle: "销售走势",
                    smallTitle: "",
                    bgColor: "rgba(230,207,92,0.25)",
                    lineColor: "#E6CF5C",
                    select: false,
                },
            ],
            title2: [
                {
                    bigTitle: "客户排名",
                    smallTitle: "",
                    bgColor: "rgba(143,205,240,0.3)",
                    lineColor: "#8FCDF0",
                    select: true,
                },
                {
                    bigTitle: "历年客户排名",
                    smallTitle: "",
                    bgColor: "rgba(32,252,255,0.25)",
                    lineColor: "#20FCFF",
                    select: false,
                },
                {
                    bigTitle: "国家占比",
                    smallTitle: "",
                    bgColor: "rgba(70,168,247,0.25)",
                    lineColor: "#46A8F7",
                    select: false,
                },
            ],
            title3: [
                {
                    bigTitle: "运费均价",
                    smallTitle: "",
                    bgColor: "rgba(143,205,240,0.3)",
                    lineColor: "#8FCDF0",
                    select: true,
                },
                {
                    bigTitle: "报关费均价",
                    smallTitle: "",
                    bgColor: "rgba(70,168,247,0.25)",
                    lineColor: "#46A8F7",
                    select: false,
                },
                {
                    bigTitle: "保险费",
                    smallTitle: "",
                    bgColor: " rgba(230,207,92,0.25)",
                    lineColor: "#E6CF5C",
                    select: false,
                },
            ],
            title0: [
                {
                    bigTitle: "国家排名",
                    smallTitle: "",
                    bgColor: "rgba(32,252,255,0.3)",
                    lineColor: "#20FCFF",
                    select: true,
                }
            ],
            title4: [
                {
                    bigTitle: "产品占比",
                    smallTitle: "",
                    bgColor: "rgba(230,207,92,0.25)",
                    lineColor: "#E6CF5C",
                    select: true,
                },
                {
                    bigTitle: "人员排名",
                    smallTitle: "",
                    bgColor: "rgba(70,168,247,0.25)",
                    lineColor: "#46A8F7",
                    select: false,
                },
            ],
            title5: [
                {
                    bigTitle: "积压品金额",
                    smallTitle: "",
                    bgColor: "rgba(143,205,240,0.3)",
                    lineColor: "#8FCDF0",
                    select: true,
                },
                {
                    bigTitle: "待发货数量",
                    smallTitle: "",
                    bgColor: "rgba(70,168,247,0.25)",
                    lineColor: "#46A8F7",
                    select: false,
                },
                {
                    bigTitle: "待发货金额",
                    smallTitle: "",
                    bgColor: "rgba(32,252,255,0.25)",
                    lineColor: "#20FCFF",
                    select: false,
                },
            ],
            xsyyData: {
                xsmb_ndxsjr: "16343.67",
                whsd: "16.9",
                sj: "4211",
                xsmb_ndxsmb: "35000.00",
                tbzz: "12.00",
                whwd: "28.5",
                kqzl: "5.6",
                xsmb_tbxsjr: "18573.32",
                fcnd: "26.3",
                yx: "3257",
            },
            fytjData: {},
            year: [],
            month: [
                "01",
                "02",
                "03",
                "04",
                "05",
                "06",
                "07",
                "08",
                "09",
                "10",
                "11",
                "12",
            ],
            fhtjData: { fhsl: 0, dbsl: 0 },
            ljxdje: 0,
            centerData: {},
            dataList: [
                { name: "中国", value: 8460.37 },
                { name: "法国", value: 3615.95 },
                { name: "日本", value: 1619.48 },
                { name: "美国", value: 1183.16 },
            ],
            bardOption: {
                grid: {
                    top: "18%",
                    bottom: "10%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：万元",
                    nameTextStyle: { color: "#DDDDDD" },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#DDDDDD",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#43A8F4", "#20FCFF"],
                series: [
                    {
                        type: "bar",
                        name: "2023",
                        barWidth: 10,
                        itemStyle: {
                            barBorderRadius: [5, 5, 0, 0],
                        },
                        data: [
                            3000, 2500, 1500, 600, 1000, 1400, 2500, 3600, 4001,
                            1007, 2008, 1001,
                        ],
                    },
                    {
                        type: "bar",
                        name: "2024",
                        barWidth: 10,
                        itemStyle: {
                            barBorderRadius: [5, 5, 0, 0],
                        },
                        data: [1430, 5825, 4515, 5336, 4410, 1254, 2242],
                    },
                ],
            },
            linedOption: {
                grid: {
                    top: "18%",
                    bottom: "10%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：万元",
                    nameTextStyle: { color: "#DDDDDD" },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#DDDDDD",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 16,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#43A8F4", "#20FCFF"],
                series: [
                    {
                        name: "2023",
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(67, 168, 244, 0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: [
                            9800, 5600, 3500, 8000, 4500, 7800, 9500, 6700,
                            4500, 6800, 7005, 6008,
                        ],
                    },
                    {
                        name: "2024",
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(32, 252, 255, 0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: [9500, 6700, 4500, 6008, 7500, 6800],
                    },
                ],
            },
            barLineOption: {
                grid: {
                    top: "18%",
                    bottom: "10%",
                    left: "10%",
                    right: "8%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: [
                    {
                        type: "value",
                        // name: '单位：件',
                        nameTextStyle: { color: "#DDDDDD" },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            color: "#DDDDDD",
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: "dashed",
                                color: "#DDDDDD",
                            },
                        },
                    },
                    {
                        type: "value",
                        nameTextStyle: { color: "#DDDDDD" },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            color: "#DDDDDD",
                            formatter: "{value}%",
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: "dashed",
                                color: "#DDDDDD",
                            },
                        },
                    },
                ],
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#43A8F4", "#D9C562", "#20FCFF"],
                series: [
                    {
                        type: "bar",
                        name: "应交PO数",
                        barWidth: 10,
                        itemStyle: {
                            barBorderRadius: [5, 5, 0, 0],
                        },
                        data: [
                            3000, 2500, 1500, 600, 1000, 1400, 2500, 3600, 4001,
                            1007, 2008, 1001,
                        ],
                    },
                    {
                        type: "bar",
                        name: "实交PO数",
                        barWidth: 10,
                        itemStyle: {
                            barBorderRadius: [5, 5, 0, 0],
                        },
                        data: [1430, 5825, 4515, 5336, 4410, 1254, 2242],
                    },
                    {
                        type: "line",
                        name: "达成率",
                        yAxisIndex: 1,
                        symbol: "circle",
                        smooth: true,
                        symbolSize: 8,
                        data: [14, 58, 45, 53, 44, 12, 22],
                    },
                ],
            },
            rypmData: [],
            xszsData: {},
            yfData: {},
            bgfyData: {},
            bxfData: {},
            jypjeData: {},
            dfhslData: {},
            dfhjeData: {},
            yjPosData: {},
            sjPosData: {},
            dclData: {},
            xsycData: {},
            xsycsjData: {},
            xsycycData: {},
            gjzbData: {},
            gjpmData: {},
            ljxdzje: 0,
            khTable: [],
            xsTable: [],
        };
    },
    computed: {},
    mounted() {
        let date = new Date();
        this.year = [date.getFullYear() - 1, date.getFullYear()];
        this.bardOption.series[0].name = this.year[0];
        this.bardOption.series[1].name = this.year[1];
        this.linedOption.series[0].name = this.year[0];
        this.linedOption.series[1].name = this.year[1];
        this.getData();
        this.getMap();
        this.tabChange2("客户排名");
        this.tabChange4("产品占比");
    },
    methods: {
        addThousandsSeparator(value) {
            const number = parseFloat(value);
            if (isNaN(number)) {
                return "NaN";
            }
            return number.toLocaleString('en-US');
        },
        getMap() {
            this.requestCode("SJKB.XS.db.manage.selectBoardXsDt", {}).then(
                (res) => {
                    if (res.code == 200) {
                        let totaldd = 0,
                            totalht = 0;
                        let mapData = [];
                        let rest = res.data;
                        rest.forEach((item) => {
                            totaldd += Number(item.xse);
                            totalht += Number(item.hte);
                            mapData.push({ name: item.gj, value: item.xse });
                        });
                        this.dataList = mapData;
                        this.ljxdzje = totaldd;
                        let arrHt = rest.sort(function (a, b) {
                            return Number(b.hte) - Number(a.hte);
                        });
                        this.khTable = JSON.parse(JSON.stringify(arrHt));
                        arrHt = arrHt.slice(0, 5);
                        let xData = [],
                            data = [];
                        arrHt.forEach((item) => {
                            xData.push(item.gj);
                            data.push(((item.hte / totalht) * 100).toFixed(2));
                        });
                        this.gjzbData.x = xData.reverse();
                        this.gjzbData.data = data.reverse();

                        let arrDd = rest.sort(function (a, b) {
                            return Number(b.xse) - Number(a.xse);
                        });
                        this.xsTable = JSON.parse(JSON.stringify(arrDd));
                        arrDd = arrDd.slice(0, 6);
                        let gjpm = [];
                        arrDd.forEach((item) => {
                            gjpm.push({ value: item.xse, name: item.gj });
                        });
                        this.gjpmData = gjpm;
                        // this.tabChange4("国家排名");
                        let option = {
                            tooltip: {
                                trigger: "item",
                            },
                            grid: {
                                top: "1%",
                                bottom: "20%",
                                left: "1%",
                                right: "1%",
                            },
                            legend: {
                                bottom: "2%",
                                left: "center",
                                itemWidth: 8,
                                itemHeight: 3,
                                itemGap: 15,
                                textStyle: {
                                    color: "#EEEEEE",
                                    fontWeight: 600,
                                    fontSize: 12,
                                },
                                // formatter: (name) => {
                                //     let data = option.series[0].data;
                                //     let tarValue;
                                //     for (let i = 0; i < data.length; i++) {
                                //         if (data[i].name == name) {
                                //             tarValue = data[i].value;
                                //         }
                                //     }
                                //     return `${name}\n${tarValue}万元`;
                                // },
                            },
                            title: {
                                show: true,
                                text: "地区产品\n销售情况",
                                left: "center",
                                top: "32%",
                                textStyle: {
                                    color: "#DDDDDD",
                                    fontSize: 12,
                                    fontWeight: 400,
                                },
                            },
                            // color: ["#1A79FF", "#97D6BF"],
                            series: [
                                {
                                    name: "地区产品销售情况",
                                    type: "pie",
                                    center: ["50%", "40%"],
                                    radius: ["35%", "65%"],
                                    avoidLabelOverlap: false,
                                    label: {
                                        position: "inside",
                                        formatter: "{d}%",
                                        textStyle: {
                                            color: "#DDDDDD",
                                            fontSize: 14,
                                            fontWeight: 600,
                                        },
                                    },
                                    labelLine: {
                                        show: false,
                                    },
                                    data: this.gjpmData,
                                },
                            ],
                        };
                        this.$nextTick(() => {
                            echarts.init(this.$refs.domDqpm).setOption(option);
                        });
                    }
                }
            );
        },
        //表格滚动
        scrollBar(ref) {
            let dom = this.$refs[ref];
            let height = dom.offsetHeight;
            if (dom.offsetHeight < dom.scrollHeight) {
                setInterval(() => {
                    let topHeight = dom.scrollTop;
                    let scrollHeight = dom.scrollHeight;
                    if (scrollHeight == height + topHeight) {
                        dom.scrollTop = 0;
                    } else {
                        dom.scrollTop = topHeight + 44;
                    }
                }, 2000);
            }
        },
        //初始化平台方法
        requestCode() {
            return this.WitGlobal.requestCode(...arguments);
        },
        tabChange1(name) {
            this.title1.forEach((item) => {
                item.select = false;
                if (item.bigTitle == name) {
                    item.select = true;
                }
            });
            if (name == "销售目标") {
                let value1 = (
                    (this.xsyyData.xsmb_ndxsjr /
                        this.xsyyData.xsmb_ndxsmb) *
                    100
                ).toFixed(2),
                    value2 = this.xsyyData.xsmb_ndxsjr;
                let option = {
                    series: [
                        {
                            type: "gauge", // 仪表盘类型
                            name: "",
                            center: ["50%", "50%"], // 中心点（圆心坐标）
                            radius: "80%", // 圆大小（仪表盘半径）
                            clockwise: true, // 仪表盘刻度是否是顺时针增长
                            // 仪表盘轴线相关配置
                            axisLine: {
                                show: true,
                                roundCap: true,
                                // 设置背景圆环样式
                                lineStyle: {
                                    width: 15, // 圆环宽度
                                    color: [[1, "#DDDDDD"]], // 圆环背景色
                                },
                            },
                            // 仪表盘指针
                            pointer: {
                                show: false,
                            },
                            // 进度设置
                            progress: {
                                show: true,
                                overlap: false, // 多组数据时进度条是否重叠
                                roundCap: true, // 是否在两端显示成圆形
                                // 进度条样式
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        1,
                                        1,
                                        [
                                            {
                                                offset: 0,
                                                color: "#43A8F4",
                                            },
                                            {
                                                offset: 1,
                                                color: "#6FE58F",
                                            },
                                        ]
                                    ),
                                },
                            },
                            // 仪表盘分割线
                            splitLine: {
                                show: false,
                            },
                            // 刻度样式
                            axisTick: {
                                show: false,
                            },
                            // 刻度标签
                            axisLabel: {
                                show: false,
                            },
                            title: {
                                show: true,
                                fontSize: 18,
                                color: "#DDDDDD",
                                offsetCenter: ["0", "100%"],
                            },
                            detail: {
                                fontSize: 14,
                                color: "auto",
                            },
                            data: [
                                {
                                    value: value1,
                                    name: "销售达成率",
                                    detail: {
                                        // 中心title设置
                                        offsetCenter: ["0%", "0%"],
                                        color: "#46A8F7",
                                        formatter: (value) => {
                                            return [
                                                "{a|" + value + "%}",
                                                "{b|" + value2 + "}",
                                            ].join("\n");
                                        },
                                        rich: {
                                            a: {
                                                color: "#46A8F7",
                                                fontSize: 30,
                                                fontWeight: 600,
                                            },
                                            b: {
                                                color: "#DDDDDD",
                                                fontSize: 18,
                                            },
                                        },
                                    },
                                },
                            ],
                        },
                    ],
                };
                this.$nextTick(() => {
                    echarts.init(this.$refs.salesChart).setOption(option);
                });
            } else {
                let option = JSON.parse(JSON.stringify(this.bardOption));
                option.series[0].data = this.xszsData[this.year[0]];
                option.series[1].data = this.xszsData[this.year[1]];
                this.$nextTick(() => {
                    echarts.init(this.$refs.domXszs).setOption(option);
                });
            }
        },
        tabChange2(name) {
            this.title2.forEach((item) => {
                item.select = false;
                if (item.bigTitle == name) {
                    item.select = true;
                }
            });

            if (name == "客户排名" || name == "历年客户排名") {
                this.requestCode(
                    "SJKB.XS.db.manage.selectBoardXsKhtj",
                    {}
                ).then((res) => {
                    if (res.code == 200) {
                        let rest = res.data;
                        let khpmData = rest.sort(function (a, b) {
                            return Number(a.xse) - Number(b.xse);
                        });
                        khpmData = khpmData.slice(0, 5);
                        let khpmY = [],
                            khpmD = [];
                        khpmData.forEach((item) => {
                            khpmY.push(item.khmc);
                            khpmD.push(item.xse);
                        });
                        let lnkhpmData = rest.sort(function (a, b) {
                            return Number(b.zs) - Number(a.zs);
                        });
                        let lnkhpmX = [],
                            lnkhpmD = [];
                        lnkhpmData.forEach((item) => {
                            lnkhpmX.push(item.khmc);
                            lnkhpmD.push(item.zs);
                        });
                        if (name == "客户排名") {
                            let option = {
                                tooltip: {
                                    trigger: "axis",
                                    axisPointer: {
                                        type: "shadow",
                                    },
                                },
                                grid: {
                                    left: "3%",
                                    right: "4%",
                                    bottom: "3%",
                                    top: "3%",
                                    containLabel: true,
                                },
                                xAxis: {
                                    type: "value",
                                    axisLine: {
                                        show: false,
                                        lineStyle: {
                                            color: "#DDDDDD",
                                        },
                                    },
                                    splitLine: {
                                        show: true,
                                        lineStyle: {
                                            type: "dashed",
                                            color: "#DDDDDD",
                                        },
                                    },
                                },
                                yAxis: {
                                    type: "category",
                                    data: khpmY,
                                    axisTick: {
                                        show: false,
                                    },
                                    axisLine: {
                                        lineStyle: {
                                            color: "#DDDDDD",
                                        },
                                    },
                                    axisLine: {
                                        lineStyle: {
                                            color: "#DDDDDD",
                                        },
                                    },
                                },
                                legend: { show: false },
                                series: [
                                    {
                                        name: "排名",
                                        type: "bar",
                                        data: khpmD,
                                        barWidth: 16,
                                        itemStyle: {
                                            borderRadius: [0, 8, 8, 0],
                                            color: new echarts.graphic.LinearGradient(
                                                0,
                                                0,
                                                1,
                                                1,
                                                [
                                                    {
                                                        offset: 0,
                                                        color: "#DDDDDD",
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: "#43A8F4",
                                                    },
                                                ]
                                            ),
                                        },
                                    },
                                ],
                            };
                            this.$nextTick(() => {
                                echarts
                                    .init(this.$refs.domKhpm)
                                    .setOption(option);
                            });
                        } else if (name == "历年客户排名") {
                            let option = {
                                tooltip: {
                                    trigger: "axis",
                                    axisPointer: {
                                        type: "none",
                                    },
                                    formatter: function (params) {
                                        return (
                                            params[0].name +
                                            ": " +
                                            params[0].value
                                        );
                                    },
                                },
                                grid: {
                                    top: "18%",
                                    bottom: "12%",
                                    left: "10%",
                                    right: "3%",
                                },
                                xAxis: {
                                    type: "category",
                                    axisLine: {
                                        lineStyle: {
                                            color: "#DDDDDD",
                                            width: 2,
                                        },
                                    },
                                    axisTick: {
                                        show: false,
                                    },
                                    axisLabel: {
                                        color: "#DDDDDD",
                                    },
                                    data: lnkhpmX,
                                },
                                yAxis: {
                                    type: "value",
                                    name: "单位：万元",
                                    nameTextStyle: { color: "#DDDDDD" },
                                    axisLine: {
                                        show: false,
                                    },
                                    axisLabel: {
                                        color: "#DDDDDD",
                                    },
                                    splitLine: {
                                        show: true,
                                        lineStyle: {
                                            type: "dashed",
                                            color: "#DDDDDD",
                                        },
                                    },
                                },
                                color: ["#F2B39D"],
                                series: [
                                    {
                                        name: "hill",
                                        type: "pictorialBar",
                                        barCategoryGap: "-10%",
                                        symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
                                        data: lnkhpmD,
                                        z: 10,
                                    },
                                ],
                            };
                            this.$nextTick(() => {
                                echarts
                                    .init(this.$refs.domLnkhpm)
                                    .setOption(option);
                            });
                        }
                    }
                });
            } else {
                let option = {
                    grid: {
                        left: "2%",
                        right: "2%",
                        bottom: "5%",
                        top: "3%",
                        containLabel: true,
                    },
                    xAxis: {
                        show: false,
                    },
                    yAxis: {
                        show: false,
                        type: "category",
                        data: this.gjzbData.x,
                        axisTick: {
                            show: false,
                        },
                    },
                    color: "#E69E7C",
                    legend: { show: false },
                    series: [
                        {
                            name: "排名",
                            type: "bar",
                            data: this.gjzbData.data,
                            barWidth: 12,
                            itemStyle: {
                                borderRadius: [6, 6, 6, 6],
                            },
                            label: {
                                show: true,
                                position: "left",
                                fontSize: 12,
                                color: "#DDDDDD",
                                formatter: "  {b}\n{@score}%",
                            },
                        },
                    ],
                };
                this.$nextTick(() => {
                    echarts.init(this.$refs.domSfzb).setOption(option);
                });
            }
        },
        tabChange3(name) {
            this.title3.forEach((item) => {
                item.select = false;
                if (item.bigTitle == name) {
                    item.select = true;
                }
            });
            let option = JSON.parse(JSON.stringify(this.bardOption));
            if (name == "运费均价") {
                option.series[0].data = this.yfData[this.year[0]];
                option.series[1].data = this.yfData[this.year[1]];
                this.$nextTick(() => {
                    echarts.init(this.$refs.domYf).setOption(option);
                });
            } else if (name == "报关费均价") {
                option.series[0].data = this.bgfyData[this.year[0]];
                option.series[1].data = this.bgfyData[this.year[1]];
                this.$nextTick(() => {
                    echarts.init(this.$refs.domBgfy).setOption(option);
                });
            } else {
                option.series[0].data = this.bxfData[this.year[0]];
                option.series[1].data = this.bxfData[this.year[1]];
                this.$nextTick(() => {
                    echarts.init(this.$refs.domBxf).setOption(option);
                });
            }
        },
        tabChange4(name) {
            this.title4.forEach((item) => {
                item.select = false;
                if (item.bigTitle == name) {
                    item.select = true;
                }
            });
            if (name == "产品占比") {
                this.requestCode(
                    "SJKB.XS.db.manage.selectBoardXsCpzb",
                    {}
                ).then((res) => {
                    if (res.code == 200) {
                        let data = res.data.map((item) => {
                            return { value: item.number, name: item.name };
                        });
                        let option = {
                            tooltip: {
                                trigger: "item"
                            },
                            legend: {
                                left: "17%",
                                top: "center",
                                orient: "vertical",
                                itemWidth: 12,
                                itemHeight: 6,
                                itemGap: 10,
                                textStyle: { color: "#DDDDDD", fontSize: 16 },
                            },
                            // color: [
                            //     "#2C5FFF",
                            //     "#179CFF",
                            //     "#01F3F0",
                            //     "#5A9AFF",
                            //     "#BA98FF",
                            //     "#7860F2",
                            //     "#7484FF",
                            // ],
                            series: [
                                {
                                    name: "地区产品销售情况",
                                    type: "pie",
                                    center: ["65%", "51%"],
                                    radius: ["40%", "70%"],
                                    avoidLabelOverlap: false,
                                    label: {
                                        formatter: "{b}: {c}万元\n{d}%",
                                        color: "inherit",
                                        textStyle: {
                                            fontSize: 14,
                                            fontWeight: 600,
                                        },
                                    },
                                    labelLine: {
                                        lineStyle: {
                                            width: 2,
                                        },
                                    },
                                    data: data,
                                },
                            ],
                        };
                        this.$nextTick(() => {
                            echarts.init(this.$refs.domCpzb).setOption(option);
                        });
                    }
                });
            } else {
                this.requestCode(
                    "SJKB.XS.db.manage.selectBoardXsXsxqRy",
                    {}
                ).then((res) => {
                    if (res.code == 200) {
                        this.rypmData = res.data.map((item) => {
                            item.fyzb =
                                ((item.xsfy / item.jr) * 100).toFixed(2) + "%";
                            return item;
                        });
                    }
                });
            }
        },
        tabChange5(name) {
            this.title5.forEach((item) => {
                item.select = false;
                if (item.bigTitle == name) {
                    item.select = true;
                }
            });
            let option = JSON.parse(JSON.stringify(this.linedOption));
            if (name == "积压品金额") {
                option.series[0].data = this.jypjeData[this.year[0]];
                option.series[1].data = this.jypjeData[this.year[1]];
                this.$nextTick(() => {
                    echarts.init(this.$refs.domJypje).setOption(option);
                });
            } else if (name == "待发货数量") {
                option.series[0].data = this.dfhslData[this.year[0]];
                option.series[1].data = this.dfhslData[this.year[1]];
                this.$nextTick(() => {
                    echarts.init(this.$refs.domDfhsl).setOption(option);
                });
            } else {
                option.series[0].data = this.dfhjeData[this.year[0]];
                option.series[1].data = this.dfhjeData[this.year[1]];
                this.$nextTick(() => {
                    echarts.init(this.$refs.domDfhje).setOption(option);
                });
            }
        },
        getData() {
            this.requestCode("SJKB.XS.db.manage.selectBoardXsAtt", {}).then(
                (res) => {
                    if (res.code == 200) {
                        this.xsyyData = res.data[0];
                        this.tabChange1("销售目标");
                        let hkbl = (
                            (this.xsyyData.xsht_hkje / this.xsyyData.xsht_je) *
                            100
                        ).toFixed(2);
                        let option1 = {
                            title: [
                                {
                                    text: hkbl + "%",
                                    left: "center",
                                    top: "38%",
                                    textStyle: {
                                        fontSize: 32,
                                        color: "#DDDDDD",
                                        fontWeight: "600",
                                    },
                                },
                                {
                                    text: "回款比例",
                                    left: "center",
                                    top: "50%",
                                    textStyle: {
                                        fontSize: 18,
                                        color: "#DDDDDD",
                                        fontWeight: "400",
                                    },
                                },
                            ],
                            polar: {
                                //极坐标系地底板
                                radius: ["55%", "75%"],
                                center: ["50%", "45%"],
                            },
                            angleAxis: {
                                //角度轴，一个圆圈
                                max: 100,
                                show: true,
                                axisLine: {
                                    show: false,
                                },
                                axisTick: {
                                    show: false,
                                },
                                axisLabel: {
                                    show: false,
                                },
                                splitLine: {
                                    show: false,
                                },
                            },
                            radiusAxis: {
                                type: "category",
                                show: true,
                                axisLine: {
                                    show: false,
                                },
                                axisTick: {
                                    show: false,
                                },
                                axisLabel: {
                                    show: false,
                                },
                                splitLine: {
                                    show: false,
                                },
                            },
                            color: ["#0095FF"],
                            series: [
                                {
                                    name: "",
                                    type: "bar",
                                    roundCap: true,
                                    barWidth: 90,
                                    showBackground: true,
                                    backgroundStyle: {
                                        color: "#DDDDDD",
                                    },
                                    coordinateSystem: "polar",
                                    data: [hkbl],
                                },
                            ],
                        };
                        this.$nextTick(() => {
                            echarts.init(this.$refs.domXsht).setOption(option1);
                        });
                    }
                }
            );
            this.requestCode("SJKB.XS.db.manage.selectBoardXsY", {}).then(
                (res) => {
                    if (res.code == 200) {
                        let rest = res.data;
                        this.year.forEach((item) => {
                            this.xszsData[item] = [];
                            this.yfData[item] = [];
                            this.bgfyData[item] = [];
                            this.bxfData[item] = [];
                            this.jypjeData[item] = [];
                            this.dfhslData[item] = [];
                            this.dfhjeData[item] = [];
                            this.yjPosData[item] = [];
                            this.sjPosData[item] = [];
                            this.dclData[item] = [];
                            this.xsycsjData[item] = [];
                            this.xsycycData[item] = [];
                            for (let i = 1; i < 13; i++) {
                                let obj =
                                    rest.find(
                                        (it) => it.year == item && it.month == i
                                    ) || {};
                                this.xszsData[item].push(obj.xszs || "");
                                this.yfData[item].push(obj.yfjj || "");
                                this.bgfyData[item].push(obj.bgfjj || "");
                                this.bxfData[item].push(obj.bxf || "");
                                this.jypjeData[item].push(obj.jypje || "");
                                this.dfhslData[item].push(obj.dfhsl || "");
                                this.dfhjeData[item].push(obj.dfhje || "");
                                this.yjPosData[item].push(obj.yjdds || "");
                                this.sjPosData[item].push(obj.sjdds || "");
                                this.dclData[item].push(((obj.sjdds / obj.yjdds) * 100).toFixed(2) || "");
                                this.xsycsjData[item].push(obj.sjxsje || "");
                                this.xsycycData[item].push(obj.xsycje || "");
                            }
                        });
                        this.tabChange3("运费均价");
                        this.tabChange5("积压品金额");
                        let option2 = JSON.parse(
                            JSON.stringify(this.barLineOption)
                        );
                        option2.series[0].data = this.yjPosData[this.year[1]];
                        option2.series[1].data = this.sjPosData[this.year[1]];
                        option2.series[2].data = this.dclData[this.year[1]];
                        let option3 = JSON.parse(
                            JSON.stringify(this.linedOption)
                        );
                        option3.series[0].name = "实际";
                        option3.series[1].name = "预测";
                        option3.series[0].data = this.xsycsjData[this.year[1]];
                        option3.series[1].data = this.xsycycData[this.year[1]];
                        this.$nextTick(() => {
                            echarts
                                .init(this.$refs.domDdzjl)
                                .setOption(option2);
                            echarts
                                .init(this.$refs.domXseyc)
                                .setOption(option3);
                        });
                    }
                }
            );
        }
    },
};
</script>
<style lang="scss" scoped>
	.page_board {
		width: 1920px;
		height: 1080px;
		background: #111726;
		display: flex;
		flex-direction: column;
		font-size: 14px;
		line-height: normal;

		.page_header {
            height: 80px;
            line-height: 70px;
            background: url(./top.png) no-repeat;
            background-size: cover;
            font-weight: 600;
            font-size: 24px;
            color: #ffffff;
            text-align: center;
            span{
                font-weight: 600;
                font-size: 40px;
                color: #ffffff;
                text-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
                background: linear-gradient(0deg, #99bbff 0%, #ffffff 100%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                text-align: center;
                padding-top: 36px;
            }
		}

		.page_content {
			flex: auto;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 20px;
			padding-top: 0;

			.com_big_title {
				font-size: 20px;
				color: #0095ff;
				height: 60px;
				padding-top: 21px;
				text-align: center;
			}

			.com_small_title {
				display: flex;
				flex-direction: row;

				&>div {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					height: 60px;
					color: #FFFFFF;
					border-bottom: 3px solid rgba(0, 0, 0, 0);

					span {
						margin-top: 5px;
					}
				}

				.bg1 {
					background: rgba(70, 168, 247, 0.3);

					span {
						color: #46a8f7;
					}
				}

				.bg2 {
					background: rgba(230, 207, 92, 0.25);

					span {
						color: #e6cf5c;
					}
				}

				.select {
					border-bottom: 3px solid #077dee;
				}
			}

			.com_box {
				flex: auto;
				background: rgba(255, 255, 255, 0.05);
				flex-shrink: 0;
				overflow: hidden;
				padding: 0 10px;
                .gjzb .com_table{
                    height: 182px;
                }
                .gjpm .com_table{
                    height: 162px;
                    display: block;
                }
			}

			.com_chart {
				width: 100%;
				height: 100%;
			}

			.com_table {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;

				.thead,
				.tr {
					display: flex;
					flex-direction: row;

					&>div {
						flex: 1;
						padding: 7px;
						overflow: hidden;
						white-space: nowrap;
					}
				}

				.thead {
					color: #1a79ff;
				}

				.tbody {
					height: 150px;
					overflow-y: scroll;
					color: #DDDDDD;

					&::-webkit-scrollbar {
						display: none;
					}

					.tr {
						&:nth-child(2n-1) {
							background: rgba(0, 0, 0, 0.1);
							border-bottom: 1px solid #DDDDDD;
							border-top: 1px solid #DDDDDD;
						}
					}
				}
			}

			&>div {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				&>div {
					flex: 1;
					flex-shrink: 0;
					overflow: hidden;
					display: flex;
					flex-direction: column;

					&:not(:first-child) {
						margin-left: 20px;
					}
				}
			}

			.home_top,
			.home_center {
				height: 330px;

				.box_m {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: row;
					padding-bottom: 10px;

					.box_l {
						width: 40%;
					}

					.box_r {
						flex: auto;
						display: flex;
						flex-direction: column;
						overflow: hidden;

						&>div {
							&>span {
								font-size: 12px;
								color: #DDDDDD;
							}

							&>label {
								font-weight: 600;
								font-size: 14px;
								color: #DDDDDD;
							}

							&:first-child {
								margin: 13px 0 5px 5px;
							}
						}
					}
				}
			}

			.home_top {
				.st_xsyy {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: row;

					.left {
						width: 45%;
						flex-shrink: 0;
					}

					.right {
						flex: auto;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						flex-shrink: 0;
						margin: 30px 0 10px;

						&>div {
							display: flex;
							flex-direction: row;
							align-items: center;

							span {
								font-size: 16px;
								color: #CCC;
							}

							label {
								font-size: 24px;
								color: #20fcff;
								text-align: left;
								margin-right: 15px;
							}

							p {
								font-size: 12px;
								color: #00ff55;
								margin-top: 7px;
							}
						}
					}
				}
			}

			.home_foot {
				flex: auto;

				.st_xsht {
					display: flex;
					flex-direction: row;

					&>div {
						&:first-child {
							width: 60%;
						}

						&:last-child {
							flex: auto;
						}
					}

					.right {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						padding: 20px;

						&>div {
							background: rgba(255, 255, 255, 0.1);
							height: 40%;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							align-items: center;
							padding: 10% 0;

							span {
								font-size: 18px;
								color: #DDDDDD
							}

							label {
								font-size: 24px;
								font-weight: bold;
								color: #2efdff;
							}
						}
					}
				}
			}
		}
	}
</style>